<template>
  <div id="modular1"> 
   
     <div style="display:flex;">
          <div style="flex:1;">
                <div class="con">
                    <div class="top">
                        <div class="top_item" style="flex: 1;">
                            <img class="top_img" src="@/assets/images/echarts_tb3.png" />
                              权限情况
                        </div>
                    </div>
                    <div class="box" v-if="ishave">
                       <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  :src="urlimg + datalist[0].level_logo" />
                                    {{ datalist[0].title }}
                                </div>
                                <div class="item_b_2"> {{ datalist[0].fit_num }}</div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  :src="urlimg + datalist[1].level_logo" />
                                    {{ datalist[1].title }}
                                </div>
                                <div class="item_b_2">{{ datalist[1].fit_num }}</div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  :src="urlimg + datalist[2].level_logo" />
                                    {{ datalist[2].title }}
                                </div>
                                <div class="item_b_2">{{ datalist[2].fit_num }}</div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  :src="urlimg + datalist[3].level_logo" />
                                    {{ datalist[3].title }}
                                </div>
                                <div class="item_b_2">{{ datalist[3].fit_num }}</div>
                            </div>
                    </div>
                    <div class="box" v-if="!ishave" style="display: flex;align-items: center;justify-content: center;">
                        权限暂不支持查看所有用户
                    </div>
                </div>
          </div>
          <div style="margin-left:30px;width:300px;">
              <div class="con">
                    <div class="top">
                        <div class="top_item" style="flex: 1;">
                            <img class="top_img" src="@/assets/images/echarts_tb9.png" />
                              积分情况
                        </div>
                    </div>
                    <div class="box" style="padding:15px 60px;">
                          <div class="box_item">
                            <div class="item_c">
                                <div class="item_c_1">蜜贝持有 <img  @click="mtk1_but()"  style="width:18px;height:18px;margin-left:5px;" src="@/assets/images/wh.png" /></div>
                                <div class="item_c_2">{{ jfandhdlist.kmb }} </div>
                            </div>
                             <div class="item_c">
                                <div class="item_c_1">金蜜持有</div>
                                <div class="item_c_2">{{ jfandhdlist.gdb }}</div>
                            </div>
                             <div class="item_c">
                                <div class="item_c_1">金蜜券持有 <img  @click="mtk2_but()"  style="width:18px;height:18px;margin-left:5px;" src="@/assets/images/wh.png" /></div>
                                <div class="item_c_2">{{ jfandhdlist.ticket }}</div>
                            </div>
                          </div>
                    </div>
              </div>
          </div>
          <div style="flex:1;margin-left:30px;">
              <div class="con">
                    <div class="top">
                        <div class="top_item" style="flex: 1;">
                            <img class="top_img" src="@/assets/images/echarts_tb10.png" />
                              活动统计
                        </div>
                    </div>
                    <div class="box" style="display:flex;padding:15px 60px;">
                        <div class="box_item" style="flex:1;border-right: 2px solid #E5E5E5;">
                            <div class="item_c">
                                <div class="item_c_1">金蛋总数</div>
                                <div class="item_c_2">{{ jfandhdlist.cash_red_back_total_number }}</div>
                            </div>
                             <div class="item_c">
                                <div class="item_c_1">金蛋已兑换</div>
                                <div class="item_c_2">{{ jfandhdlist.cash_red_back_used }}</div>
                            </div>
                             <div class="item_c">
                                <div class="item_c_1">金蛋未兑换</div>
                                <div class="item_c_2">{{ jfandhdlist.cash_red_back_number }}</div>
                            </div>
                          </div>
                          <div class="box_item" style="flex:1;margin-left:60px;">
                            <div class="item_c">
                                <div class="item_c_1">彩蛋总数</div>
                                <div class="item_c_2">{{ jfandhdlist.range_cash_reward_total }}</div>
                            </div>
                             <div class="item_c">
                                <div class="item_c_1">彩蛋已兑换</div>
                                <div class="item_c_2">{{ jfandhdlist.range_cash_reward_used }}</div>
                            </div>
                             <div class="item_c">
                                <div class="item_c_1">彩蛋未兑换</div>
                                <div class="item_c_2">{{ jfandhdlist.range_cash_reward }}</div>
                            </div>
                          </div>
                    </div>
              </div>
          </div>
      </div>
      

      <el-dialog title='蜜贝持有' :visible.sync="mtk1"  width="400px">
          <div style="width:100%;"> 
                 <div class="item_a" style="display:flex;padding:0px 0px 40px 0px;">
                      <div class="item_b_a1">
                          <div class="item_b_1" style="justify-content: center;">消耗的蜜贝数</div>
                          <div class="item_b_2" style="text-align: center;">aaaaa</div>
                      </div>
               </div>
          </div> 
      </el-dialog>

       <el-dialog title='金蜜券持有' :visible.sync="mtk2"  width="600px">
          <div style="width:100%;"> 
                <div class="item_a" style="display:flex;padding:0px 0px 40px 0px;">
                      <div class="item_b">
                          <div class="item_b_1" style="justify-content: center;">{{ variable_kind1 }}</div>
                          <div class="item_b_2" style="text-align: center;">aaaa</div>
                      </div>
                      <div class="item_b">
                          <div class="item_b_1" style="justify-content: center;">{{ variable_kind2 }}</div>
                          <div class="item_b_2" style="text-align: center;">aaaa</div>
                      </div>
                       <div class="item_b">
                          <div class="item_b_1" style="justify-content: center;">{{ variable_kind3 }}</div>
                          <div class="item_b_2" style="text-align: center;">aaaaa</div>
                      </div>
                      <div class="item_b">
                          <div class="item_b_1" style="justify-content: center;">{{ variable_kind4 }}</div>
                          <div class="item_b_2" style="text-align: center;">aaaa</div>
                      </div>
               </div>
          </div> 
      </el-dialog>

   </div>
</template>

<script>

export default {
   name: 'modular1',
   props:{
      jfandhdlist:{  
        //type:Array,
       default:()=>[]
     },
     datalist:{  
        //type:Array,
       default:()=>[]
     },
     ishave:true
  },
  data () {
    return {
        list_data:{},
        mtk1:false,
        mtk2:false,
    }
  },
   components:{

  },
  created(){
  },
  mounted (){
     
  },
  methods: {
     mtk1_but(){
        this.mtk1 = true
     },
     mtk2_but(){
        this.mtk2 = true
     }


  }
}
</script>


<style scoped>
.top{
    display: flex;
}
.top_item{
    
    display: flex;
    align-items: center;
}
.top_img{
    width: 30px;
    height: 30px;
    margin-right: 10px;
}
.box{
    padding: 15px;
    border-radius: 10px; 
    box-shadow: 0px 4px 9px 0px rgba(116, 77, 254, 0.1);
    margin-top: 20px;
    height: 250px;
}
.item_a{
  /* display:flex; */
  padding:0px 15px;

}

.item_b{
  /* flex: 1; */
  float: left;
  width: calc(100%/2);
  margin-top:30px;
}
.item_b_a1{
  /* flex: 1; */
  float: left;
  width:100%;
  margin-top:30px;
}
.item_b_1{
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  color: #5E6C84;
  display: flex;
  align-items: center;
  justify-content: center;
}
.item_b_1_img{
  width:20px;
  height: 20px;
  margin-right:5px;
}
.item_b_2{
  margin-top: 10px;
  text-align: center;
  font-size: 30px;
  font-weight: 500;
  color: #344563;
}


.box_item{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 100%;
}
.item_c{
  display: flex;
  flex-direction: column;
}
.item_c_1{
  font-size: 18px;
  font-weight: 500;
  color: #5E6C84;
  display: flex;
  align-items: center;
}

.item_c_2{
  margin-top: 10px;
  font-size: 30px;
  font-weight: 500;
  color: #344563;
}

</style>